'use client';

import { Carousel, Divider } from 'antd';
import { useLocale, useTranslations } from 'next-intl';

import React from 'react';
import styles from './index.module.less';

const SelectOrder: React.FC = () => {
    const t = useTranslations('index');
    const mockData = [
        {
            id: 1,
            title: t('Daily auction') as string,
            subTitle: '6+ blog posts'
        },
        {
            id: 2,
            title: t('Character map') as string,
            subTitle: '6+ blog posts'
        },
        {
            id: 3,
            title: t('Monster pedia') as string,
            subTitle: '6+ blog posts'
        },
        {
            id: 4,
            title: t('Community treasure') as string,
            subTitle: '6+ blog posts'
        },
        {
            id: 5,
            title: t('Latest topic') as string,
            subTitle: '6+ blog posts'
        },
        {
            id: 6,
            title: t('Creative proposal') as string,
            subTitle: '6+ blog posts'
        },
        {
            id: 7,
            title: t('Adventure Progress') as string,
            subTitle: '6+ blog posts'
        },
        {
            id: 8,
            title: t('Stay tuned') as string,
            subTitle: '6+ blog posts'
        },
        {
            id: 9,
            title: t('Stay tuned') as string,
            subTitle: '6+ blog posts'
        },
    ];

    return (
        <div className={styles.container}>
            {/* 使用flex布局来确保每行三个元素 */}
            <h2>{t('Various menus')}</h2>
            <div className={styles.row}>
                {mockData.map(item => (
                    <div key={item.id} className={styles.item}>
                        <p>{item.id}</p>
                        <p>{item.title}</p>
                        <p>{item.subTitle}</p>
                    </div>
                ))}
            </div>
            <div className={styles.buttonWrap}>
              <div className={styles.button}>{t('View More')}</div>
            </div>
        </div>
    );
};

export default SelectOrder;